<template>
  <div id="buy">

  </div>
</template>

<script>
  import data from '../../../apiData/dashboard/user.js'
  export default {
    name: "buy",
    data() {
      return {
        myChart: null,
      }
    },
    created() {
      this.data = data;
      this.$nextTick(() => {
        this.drawChart();
      });
    },
    mounted() {
      window.onresize = () => (() => {
        this.drawChart();
      })();
    },
    methods: {
      drawChart() {
        // 基于准备好的dom，初始化eCharts实例
        if(this.myChart !== null && this.myChart !== '' && this.myChart !== undefined) {
          this.myChart.dispose();  // 销毁
        }
        this.myChart = this.$echarts.init(document.getElementById('buy'));
        let option = {
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,0.4)',
            borderColor: 'rgba(0,0,0,0)',
            extraCssText: 'box-shadow: 0 0 0 rgba(0, 0, 0, 0);',
            textStyle: {
              color: "#fff" //设置文字颜色
            },
          },
          legend: {
            orient: 'vertical',  // 垂直显示
            left: 'right',  // 右边
            // top: 'bottom',  // 下方
            padding:[10,20,0,0]
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: this.data.bing_data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        option && this.myChart.setOption(option);
      }
    }
  }
</script>

<style scoped lang="scss">
  #buy {
    width: 100%;
    height: 440px;
  }
</style>
